<template>
  <el-form ref="formData" :label-width="labelWidth" :model="formData" :rules="formRules" :disabled="disabled">
    <el-row>
      <el-col :span="8">
        <el-form-item label="开发品类：">
          <FormPopover :content="formData.categoryPath" :popover-list="categoryPathSet" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开发品牌：">
          <span>{{ formData.brandName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开发区域：" prop="devAreaId">
          <slot name="devAreaId">
            <FormSelect
              :value.sync="formData.devAreaId"
              :options="devAreaOptions"
              :disabled="disabledForm.devAreaId"
              @change="handleSelectArea"
            />
          </slot>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="开发人：" prop="developerId">
          <slot name="developerId">
            <FormSelect
              :value.sync="formData.developerId"
              :options="userSelect.options"
              :get-option="userSelect.getOption"
              :loading="userSelect.loading"
              :remote-method="fetchUserInfos"
              :disabled="disabledForm.developerId"
              @change="handleSelectDeveloper"
            />
          </slot>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开发部门：" prop="devDeptName">
          <span>{{ formData.devDeptName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开发计划时间：" prop="devPlanTime">
          <slot name="devPlanTime">
            <FormDatePicker :value.sync="formData.devPlanTime" @change="updateFormData" />
          </slot>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="计划名称：" prop="planName">
          <el-input v-model.trim="formData.planName" maxlength="30" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="开发计划说明：" prop="note">
        <slot name="note">
          <el-input
            style="width: 61%;"
            v-model="formData.note"
            type="textarea"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 4 }"
            @change="updateFormData"
          />
        </slot>
      </el-form-item>
    </el-row>
    <slot />
  </el-form>
</template>
<script>
import FormPopover from './FormPopover';
import FormSelect from './FormSelect';
import FormDatePicker from './FormDatePicker';
import { getUserInfoListService } from '@/api/usercenter';
import { getDevAreaInfoService } from '@/api/commodity/developmentRequirementPlan/developPlan';
export default {
  components: {
    FormPopover,
    FormSelect,
    FormDatePicker
  },
  props: {
    required: {
      type: Boolean,
      default: true
    },
    dataSource: {
      type: Object,
      default: () => ({})
    },
    categoryPathSet: {
      type: Array,
      default: () => []
    },
    userOptions: {
      type: Array,
      default: () => []
    },
    disabledForm: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '130px'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {},
      formRules: {
        devAreaId: [{ required: this.required, trigger: 'change', message: '开发区域不能为空' }],
        developerId: [{ required: this.required, trigger: 'change', message: '开发人不能为空' }],
        devDeptName: [{ required: this.required, trigger: 'change', message: '开发部门不能为空' }],
        devPlanTime: [{ required: this.required, trigger: 'change', message: '开发计划时间不能为空' }],
        planName: [{ required: this.required, trigger: 'change', message: '计划名称不能为空' }],
        note: [{ required: this.required, trigger: 'change', message: '开发计划说明不能为空' }],
      },
      userSelect: {
        options: [],
        loading: false,
        getOption: item => [item.userId, `${item.userName} ${item.jobNumber ? `（${item.jobNumber}）` : ''}`]
      },
      devAreaOptions: {}, // 后端接口会返Map格式
    }
  },
  watch: {
    dataSource: {
      handler (newData) {
        this.formData = newData
      },
      deep: true,
      immediate: true
    },
    userOptions (options) {
      this.userSelect.options = options
    }
  },
  created () {
    this.loadDevAreaOptions()
  },
  methods: {
    // 请求用户信息
    async fetchUserInfos (userName) {
      const data = { userName }
      const loadingFn = state => { this.userSelect.loading = state }
      const res = await getUserInfoListService(data, loadingFn)
      if (res?.retData) {
        this.userSelect.options = res.retData
      }
    },
    // 选择开发人
    handleSelectDeveloper () {
      const userInfo = this.userSelect.options.find(item => item.userId == this.formData.developerId)
      if (userInfo) {
        this.formData.developerName = userInfo.userName
        this.formData.devDeptName = userInfo.hrDepartmentName
        this.formData.devDeptNo = userInfo.hrDepartmentId
      }
    },
    // 选择开发区域
    handleSelectArea (val) {
      if (!val) return
      this.$emit('change-area')
      const devAreaName = this.devAreaOptions[this.formData.devAreaId] ?? ''
      const areaInfo = { devAreaName, devAreaId: this.formData.devAreaId }
      this.$emit('update-area-info', areaInfo)
    },
    // 加载开发区域下拉集合
    async loadDevAreaOptions () {
      const res = await getDevAreaInfoService()
      if (res?.retData) {
        this.devAreaOptions = res.retData
      }
      this.$emit('get-area-options', this.devAreaOptions)
    },
    updateFormData () {
      this.$emit('update:data-source', this.formData)
    },
    // 获取表单详情
    getFormDetails () {
      const devAreaName = this.devAreaOptions[this.formData.devAreaId] ?? ''
      const [startTime, endTime] = this.formData.devPlanTime
      return _.omit({
        ...this.formData,
        startTime,
        endTime,
        devAreaName
      }, ['devPlanTime'])
    }
  }
}
</script>
